<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area"><el-button v-has type="primary" size="medium" @click="addHandle">新增店员</el-button></div>
      <div class="filter_area">
        <!-- <el-input class="serach_input mr_15 mt_15" v-model="obj.user_id" placeholder="搜索用户"></el-input> -->
        <el-input size="medium" class="serach_input mr_15 mt_15" v-model="obj.serial_num" placeholder="店员编号"></el-input>
        <el-button size="medium" class="mr_15 mt_15" @click="searchList">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table @selection-change="selectItem"  :data="list" element-loading-text="" fit highlight-current-row>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="serial_num" label="店员编号"></el-table-column>
        <el-table-column prop="user_name" label="店员名称"></el-table-column>
        <el-table-column prop="user_id" label="用户id"></el-table-column>
        <el-table-column prop="store_name" label="所属门店"></el-table-column>
        <el-table-column prop="status_text" label="状态"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog :title="type == 'add' ? '新增店员' : '编辑店员'" :visible.sync="drawer" destroy-on-close width="600px">
      <editemployee @on-close="beClose" :id="id" :type="type"></editemployee>
    </el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {getassistantlist, editassistant, delassistant} from '@/api/shop/store';
import Editemployee from './components/Editemployee';
export default {
  data() {
    return {
      obj: {
        serial_num: ''
      },
      type: 'add',
      id: -1,
      drawer: false,
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      listSelected: []
    };
  },
  components: {
    Editemployee
  },
  mounted() {
    this.searchList();
  },
  methods: {
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getassistantlist(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //编辑数据
    editItem(obj) {
      this.id = obj.id;
      this.type = 'edit';
      this.drawer = true;
    },
    addHandle() {
      this.id = -1;
      this.type = 'add';
      this.drawer = true;
    },
    //删除数据
    delItem(id) {
      this.$confirm('是否要删除该条数据？')
        .then(_ => {
          this.isLoading = true;
          delassistant({id:id}).then(res => {
            this.isLoading = false;
            //重新加载数据
            this.getDataList();
          });
        })
        .catch(_ => {
          //出错
        });
    },
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    beClose() {
      this.drawer = false;
      this.getDataList();
    },
    //批量删除商户
    delMul() {
      this.$alert('功能暂未开发!');
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
};
</script>

<style lang="scss"></style>
